<template>
    <div class="resource-centre">
        <n-tabs type="line" animated @before-leave="handleBeforeLeave">
            <n-tab-pane :name="index.name" :tab="index.name" v-for="index in tabArray">
                <ResourceCentreLayout
                    :directory="index.directory"
                    :key="refresh"
                    @on-selected="onSelected"
                >
                    <template #fileShow>
                        <OfficeDocx :file="currentFile" v-if="currentFile.file_type==='docx'"/>
                        <OfficePdf :file="currentFile" v-if="currentFile.file_type==='pdf'"/>
                        <OfficeXlsx :file="currentFile" v-if="currentFile.file_type==='xlsx'"/>
                    </template>
                </ResourceCentreLayout>
            </n-tab-pane>

        </n-tabs>
    </div>

</template>

<script setup>

import ResourceCentreLayout from "@/components/teacher/资源中心/ResourceCentreLayout.vue";
import workApi from "@/http/workApi";
import OfficeDocx from "@/components/teacher/资源中心/office/OfficeDocx.vue";
import OfficePdf from "@/components/teacher/资源中心/office/OfficePdf.vue";
import OfficeXlsx from "@/components/teacher/资源中心/office/OfficeXlsx.vue";


const tabArray = {
    file: {
        name:"文件",
        directory:[]
    },
    database: {
        name:"数据库",
        directory:[]
    },
    api: {
        name:"API接口",
        directory:[]
    },
    url: {
        name:"URL网页",
        directory:[]
    },
}
const refresh = ref(0)

function getDirectory(which="file") {
    workApi.get("teacher/data_source",{params:{which}}).then(r=>{
        tabArray[which].directory =  r.data
        refresh.value++
    })
}
getDirectory()
const handleBeforeLeave = (tabName) => {
    currentFile.value = {}
    for (let i in tabArray) {
        if (tabName === tabArray[i].name) {
            getDirectory(i)
        }
    }
    return true
}
const currentFile = ref({})
function onSelected({option}) {
    console.log(option)
    currentFile.value = option
    console.log(currentFile.value)
}
</script>

<style scoped lang="less">
.resource-centre {
    padding: 0 10px;
}
</style>